<template>
  <div class="index" id="choose-project-page">
    <div class="top-banner-box"></div>
    <div class="list-box">
      <div class="list-item-box" @click="jump(item.id)" v-for="(item,index) in list" :key="index">
        <div class="list-row flex-jus">
          <div class="list-img-box van-col van-col--6">
            <img :src="item.img" />
          </div>
          <div class="list-info-box van-col van-col--18">
            <p class="list-title">{{item.name}}</p>
            <p class="list-text">{{item.name1}}</p>
          </div>
        </div>
      </div>
      <!--list-item-box结束-->
    </div>
  </div>
</template>
<script>
export default {
  name: "chooseProject",
  data: function () {
    return {
      search: "",
      list:[
            {id:4,name:'创业扶持',name1:'创业扶持相关政策',img:require("../../assets/policy/support-icon1.png")},
            {id:5,name:'奖励补贴',name1:'奖励补贴相关政策',img:require("../../assets/policy/support-icon2.png")},
            {id:6,name:'居留出入境',name1:'居留出入境相关政策',img:require("../../assets/policy/support-icon3.png")},
            {id:7,name:'落户',name1:'落户相关政策',img:require("../../assets/policy/support-icon4.png")},
            {id:8,name:'住房保障',name1:'住房保障相关政策',img:require("../../assets/policy/support-icon5.png")},
            {id:9,name:'健康医疗',name1:'健康医疗相关政策',img:require("../../assets/policy/support-icon6.png")},
        ],            //列表
    };
  },
  mounted() {
    if (this.$route.meta) {
      this.title = this.$route.meta.title;
    }
  },
  watch: {},

  methods: {
    jump(id){
      this.$router.push({path:'/citya?cateId='+id+"&identity=g"})
    }
  },
};
</script>
<style scoped>
.index {
  background: #eee;
}
#choose-project-page .top-banner-box {
    height: 200px;
    background: transparent url(../../assets/policy/supply-policy.png) no-repeat 50%/cover;
}
#choose-project-page .list-box {
    margin-top: -70px;
}
#choose-project-page .list-item-box {
    background: #fff;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
}
#choose-project-page .list-img-box, #choose-project-page .list-item-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
#choose-project-page .list-row {
    width: 100%;
}
.van-col {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
}
.van-col--6 {
    width: 25%;
}
#choose-project-page .list-img-box {
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5px;
}
#choose-project-page .list-img-box img {
    width: 55px;
    height: 55px;
}
.van-col--18 {
    width: 75%;
}
#choose-project-page .list-info-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background: transparent url() no-repeat center right 15px/15px;
}
#choose-project-page .list-info-box p {
    width: 100%;
}
#choose-project-page .list-title {
    padding: 12px 12px 6px;
    border-bottom: 1px solid #ddd;
}
#choose-project-page .list-text {
    padding: 6px 12px 12px;
    color: #999;
    font-size: 15px;
}
#choose-project-page .list-text, #choose-project-page .list-title {
    margin-right: 50px;
}
</style>
